<template>
    <div class="customer-document kpi-content-wrapper">
        <div class="kpi-select-wrapper"> <!-- 组织下拉框 -->
            <el-select v-model="curOrg" placeholder="请选择组织" size="small" class="kpi-select">
                <el-option v-for="option in orgOptions" :label="option.name" :value="option.id" :key="option.id"></el-option>
            </el-select>
            <el-select v-model="curYear" placeholder="请选择年度" size="small" class="kpi-select" style="margin-left: 16px;">
                <el-option v-for="(year, idx) in years" :label="year" :value="year" :key="`year_${idx}`"></el-option>
            </el-select>
        </div>
        <div class="customer-document-center">
            <h2 class="cus-title">客户身份</h2>
            <div class="customer-document-chart-wrapper">
                <div class="customer-document-chart-box">
                    <pie-chart :chartData="pieDataArr[0]" v-if="pieDataArr.length" />
                </div>
                <div class="customer-document-chart-box">
                    <pie-chart :chartData="pieDataArr[1]" v-if="pieDataArr.length" />
                </div>
            </div>
        </div>
        <div class="customer-document-bottom">
            <h2 class="cus-title">客户分析</h2>
            <bar-chart />
        </div>
    </div>
</template>

<script>
    import PieChart from './child/pieChart';
    import BarChart from './child/barChart';
    export default {
        name: 'customerDocument',
        components: {
            PieChart,
            BarChart
        },
        data() {
            return {
                curOrg: '',
                orgOptions: [], // 机构列表
                curYear: 2020,
                years: [2015, 2016, 2017, 2018, 2019, 2020],
                pieDataArr: []
            }
        },
        mounted() {
            this.getOrgOptions();
            this.pieDataArr = [
                {
                    data: [
                        { name: "业主", value: "12.22" },
                        { name: "租户", value: "8.64" }
                    ]
                },
                {
                    data: [
                        { name: "个人", value: "12.22" },
                        { name: "公司", value: "8.64" }
                    ]
                },
            ]
        },
        methods: {
            getOrgOptions() {
                this.orgOptions = [
                    { id: '5801', name: '天苑花园' },
                    { id: '583', name: '银河世纪集团' }
                ];
            }
        }
    }
</script>

<style lang="scss">
.customer-document {
    .kpi-select-wrapper { // 上面的select部分
        margin-bottom: 20px;
    }
    .cus-title {
        height: 42px;
        line-height: 42px;
        border-bottom: 1px solid rgba(217,217,217,.5);
        color: rgba(0,0,0, .85);
        font-weight: normal;
        font-size: 14px;
    }
    .customer-document-chart-wrapper {
        height: 140px;
        display: flex;
        .customer-document-chart-box {
            flex: 1;
            height: 100%;
            .pie-chart-container {
                width: 100%;
                height: 100%;
            }
        }
    }
    .customer-document-bottom {
        .bar-chart-box {
            height: 228px;
            width: 100%;
            .bar-chart-container {
                width: 100%;
                height: 100%;
            }
        }
    }
}
</style>